<template>
	<view class="ti-conten">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed>
			<view slot="default" class="nav-title" @click="expertInfo" v-if="dataInfo.authorName">
				<image class="picture" :src="dataInfo.avatar"></image>
				{{dataInfo.authorName}}
			</view>
		</tn-nav-bar>
		<!-- 页面内容 -->
		<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<tn-swiper :list="list" imageMode="aspectFit" :height='dataInfo.maxHeight>950?950:dataInfo.maxHeight'
				@click="previewImage"></tn-swiper>
			<view class="title">{{dataInfo.title}}</view>
			<view class="text">{{dataInfo.body}}</view>
			<view class="tag">{{dataInfo.createtime}}</view>
			<view class="comment-title">{{commentList.length>0?'评论':'暂无评论'}}</view>
			<view class="comment-box">
				<view class="comment-list" v-for="(item,index) in commentList" :key="index">
					<image class="user-img" src="../../static/user.png"></image>
					<view class="info">
						<view class="user-name">
							<view>{{item.realName}}</view>
							<view>{{item.createTime}}</view>
						</view>
						<view class="comment-text">
							{{item.commentValue}}
						</view>
					</view>
				</view>
			</view>
			<view class="footer">
				<view class="comment" @tap="showComment" v-if="commentStatus">
					<text class="tn-icon-write" style="font-size: 35rpx;"></text>
					<input class="comment-input" disabled placeholder="说点什么..." />
				</view>
				<view class="thumbs-up" @click="like">
					<text class="tn-icon-like" v-if="dataInfo.likeStatus=='0'"></text>
					<text style="color: #e83a30;" class="tn-icon-like-fill" v-else></text>
					<span style="font-size: 28rpx;">{{dataInfo.likeCount}}</span>
				</view>
				<!-- like-lack star-fill-->
				<view class="collect" @click="collect">
					<text class="tn-icon-star" v-if="dataInfo.collectStatus=='0'"></text>
					<text style="color: #e83a30;" class="tn-icon-star-fill" v-else></text>
					<span style="font-size: 28rpx;">{{dataInfo.collectCount}}</span>
				</view>
				<view class="share">
					<button open-type="share" class="share-btn"><text class="tn-icon-share-circle" style="font-size: 40rpx;"></text>分享</button>
				</view>
			</view>
		</view>
		<ygc-comment ref="ygcComment" :placeholder="'发布评论'" @pubComment="pubComment"></ygc-comment>
	</view>
</template>

<script>
	// import ygcComment from '@/components/ygc-comment/ygc-comment.vue';
	import {
		getDetails,
		getCommentByContent,
		contentComment,
		contentLikes,
		contentFolder,
		getCommentSwitchStatus
	} from '@/util/index.js'
	export default {
		data() {
			return {
				list: [],
				id: "",
				dataInfo: {},
				commentList: [],
				commentStatus: false
			};
		},
		onLoad(option) {
			this.id = option.id
			this.getData()
			this.getComment()
			this.getSwitchStatus()
		},
		// 发送给朋友/群聊
		onShareAppMessage(res) {
			// 来自页面内分享按钮
			if (res.from === 'button') {
				console.log(res.target)
			}
			return {
				title: this.dataInfo.title, // 分享标题
				path: `/articleVideo/Ti-details/Ti-details?id=${this.id}`, // 分享路径，可带参数
				imageUrl: this.dataInfo.coverImage // 分享图片（可选）
			}
		},

		// 分享到朋友圈（仅微信小程序支持）
		onShareTimeline() {
			return {
				title: this.dataInfo.title,
				query: '', // 页面参数 key=value
				imageUrl: this.dataInfo.coverImage // 分享图片
			}
		},
		methods: {
			like() {
				contentLikes({
					contentId: this.id
				}).then((res) => {
					uni.showToast({
						title: this.dataInfo.likeStatus == '1' ? '点赞已取消！' : '感谢点赞！',
						icon: 'none'
					})
					this.dataInfo.likeCount = this.dataInfo.likeStatus == '1' ? this.dataInfo.likeCount - 1 : this
						.dataInfo.likeCount + 1
					this.dataInfo.likeStatus = this.dataInfo.likeStatus == '1' ? '0' : '1'

				})
			},
			collect() {
				contentFolder({
					contentId: this.id,
					type:0
				}).then((res) => {
					uni.showToast({
						title: this.dataInfo.collectStatus == '1' ? '收藏已取消！' : '感谢收藏！',
						icon: 'none'
					})
					this.dataInfo.collectCount = this.dataInfo.collectStatus == '1' ? this.dataInfo.collectCount -
						1 : this.dataInfo.collectCount + 1
					this.dataInfo.collectStatus = this.dataInfo.collectStatus == '1' ? '0' : '1'
				})
			},
			// 点击图片触发预览
			previewImage(index) {
				console.log(index)
				let urls = this.list.map((o) => {
					return o.image
				})
				uni.previewImage({
					current: urls[index], // 当前点击的图片
					urls: urls,
					success: () => console.log('预览成功'),
					fail: (err) => console.error('预览失败', err)
				});
			},
			showComment() {
				this.$refs.ygcComment.toggleMask('show')
			},
			pubComment(e) {
				contentComment({
					contentId: this.id,
					commentValue: e
				}).then((res) => {
					uni.showToast({
						title: '评论已发送！',
						icon: 'none'
					})
					this.getComment()
				})
			},
			getData() {
				getDetails({
					id: this.id
				}).then((res) => {
					this.dataInfo = res
					this.list = res.contentPictureVOList.map(o => {
						return {
							image: o.url
						}
					})
				})
			},
			getComment() {
				getCommentByContent({
					contentId: this.id,
					page: 1,
					limit: 500
				}).then((res) => {
					this.commentList = res.list

				})
			},
			expertInfo() {
				uni.navigateTo({
					url: `/templatePage/expert-info/expert-info?id=${this.dataInfo.authorId}`
				})
			},
			getSwitchStatus() {
				getCommentSwitchStatus().then((res) => {
					this.commentStatus = res.status == "1" ? true : false
				})
			}

		}
	}
</script>

<style lang="less">
	.ti-conten {
		padding-bottom: 200rpx;
	}

	.nav-title {
		display: flex;
		align-items: center;
	}

	.title {
		padding: 20rpx;
		font-size: 30rpx;
		font-weight: 600;
	}

	.text {
		padding: 0 20rpx;
		font-size: 30rpx;
	}

	.tag {
		font-size: 24rpx;
		color: #9b9b9b9b;
		padding: 10rpx 20rpx;
	}

	.comment-box {
		width: 100%;
		padding: 0 20rpx;

		.comment-list {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.user-img {
				width: 80rpx;
				height: 80rpx;
				display: block;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.info {
				width: 600rpx;

				.user-name {
					color: #9b9b9b9b;
					font-size: 26rpx;
					margin-bottom: 10rpx;
					display: flex;
					justify-content: space-between;
					width: 100%;
					align-items: center;
				}

				.comment-text {
					font-size: 28rpx;
				}
			}
		}
	}

	.comment-title {
		padding: 10rpx 20rpx;
		color: #9b9b9b;
	}

	.picture {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx 60rpx 20rpx;
		border-top: 1rpx solid #eeeeee;
		font-size: 45rpx;
		background-color: #FFFFFF;

		.comment {
			display: flex;
			border: 1rpx solid #eeeeee;
			align-items: center;
			padding: 5rpx 15rpx;
			border-radius: 20rpx;
			font-size: 28rpx;
			flex: 1;
			height: 70rpx;
		}

		.thumbs-up {
			width: 100rpx;
			text-align: right;

		}

		.collect {
			width: 100rpx;
			text-align: center;
		}
		.share{
			width: 100rpx;
			text-align: center;
			margin-top: 8rpx;
			.share-btn{
				width: 100rpx;
				font-size: 25rpx;
				padding: 0;
				display: flex;
				align-items: center;
				background: none;
			}
		}
	}
</style>
